<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .cell {
        max-height: 40px !important;
    }

    .spacing {
        height: 50px;
    }
</style>

<body>
<div id="app">
    <el-container>
        <el-main>
            <el-header>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                    <el-breadcrumb-item>发货单列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <el-row :gutter="20" style="margin-left: 0;margin-right: 0">
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-input placeholder="请输入发货单号" v-model="sales_order_no">
                    </el-input>
                </el-col>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-input placeholder="请输入发货员" v-model="sales_man">
                    </el-input>
                </el-col>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-input placeholder="请输入项目名称" v-model="project_name">
                    </el-input>
                </el-col>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-date-picker
                            v-model="startTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期" style="width: 100%">
                    </el-date-picker>
                </el-col>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-date-picker
                            v-model="endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期" style="width: 100%">
                    </el-date-picker>
                </el-col>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-col>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="spacing">
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="tableLoading" :data="tableData" stripe border style="width:100%" highlight-current-row
                      size="mini"
                      tooltip-effect="dark" height="calc(100vh - 240px)"
            >
                <el-table-column label="序号" align="center" width="50px">
                    <template scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
                </el-table-column>
                <el-table-column prop="orderBill_id" label="发货单号" align="center" :show-overflow-tooltip=true>
                    <template slot-scope="{row}">
                        {{ row.orderBill_id || '暂无' }}
                    </template>
                    　　
                </el-table-column>
                　　
            <#--<el-table-column prop="order_name" label="名称" align="center">-->
            <#--<template slot-scope="{row}">-->
            <#--{{ row.order_name || '暂无' }}-->
            <#--</template>-->
            <#--　　-->
            <#--</el-table-column>-->
                <el-table-column prop="crtTime" label="发货时间" align="center" :show-overflow-tooltip=true>
                    　　
                    <template slot-scope="{row}">
                        {{ row.crtTime || '暂无' }}
                    </template>
                </el-table-column>
                　　
                <el-table-column prop="supply_user" label="发货员" align="center" :show-overflow-tooltip=true>
                    　　
                    <template slot-scope="{row}">
                        {{ row.supply_user || '暂无' }}
                    </template>
                </el-table-column>
                <el-table-column prop="delivery_company" label="发货公司" align="center" :show-overflow-tooltip=true>
                    　　
                    <template slot-scope="{row}">
                        {{ row.delivery_company || '暂无' }}
                    </template>
                </el-table-column>
                　　
                <el-table-column v-if prop="consignee_name" label="客户名称" align="center" :show-overflow-tooltip=true>
                    　　
                    <template slot-scope="{row}">
                        {{ row.consignee_name || '暂无' }}
                    </template>
                </el-table-column>
                <el-table-column prop="project_name" label="项目名称" align="center" :show-overflow-tooltip=true>
                    　　
                    <template slot-scope="{row}">
                        {{ row.project_name || '暂无' }}
                    </template>
                </el-table-column>
            <#--<el-table-column v-if prop="consignee_address" label="收货地址" align="center" :show-overflow-tooltip=true>-->
            <#--　　-->
            <#--<template slot-scope="{row}">-->
            <#--{{ row.consignee_address || '暂无' }}-->
            <#--</template>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="price" label="发货金额" align="center">-->
            <#--　　-->
            <#--<template slot-scope="{row}">-->
            <#--{{ row.price || '暂无' }}-->
            <#--</template>-->
            <#--</el-table-column>-->
                　　
                <el-table-column prop="orderBill_customStat" label="状态" align="center" :formatter="formatStatus"
                                 :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="100px" fixed="right">
                    　　　　
                    <template slot-scope="scope">
                    <#--等待乙方确认状态-->
                        　　　　<#if success == "success">　
                        <el-button type="text" v-if="scope.row.isCheckBillExist==00"
                                   @click="affirmOrder(scope.row.orderBill_id,scope.row.orderBean_pk)">收货
                        </el-button>
                        　</#if>　　
                    <#--<#if success != "success">　-->
                    <#--<el-button type="text" v-if="scope.row.isCheckBillExist==00"-->
                    <#--@click="updateOrder(scope.row.orderBill_id,scope.row.orderBean_pk)">编辑-->
                    <#--</el-button>-->
                    <#--　</#if>　　-->
                        <el-button type="text"
                                   @click="detail(scope.row.orderBill_id,scope.row.orderBean_pk,scope.row.orderBill_customStat)">
                            查看
                        </el-button>
                        　　　　
                    </template>
                    　　
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-row>
                <el-col>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :page-sizes="[100, 500, 1000]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="totalRecords">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableLoading: false,
                dialogFormVisible: false,
                dialogVisible: false,
                dialogImageUrl: '',
                sales_order_no: '',
                sales_order_name: '',
                sales_amount: '',
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 100, //每页总数
                totalRecords: 0, //总条数
                sales_order_no: '',
                sales_man: "",
                file: '',
                param: '',
                startTime: '',
                endTime: '',
                project_name: '',
                endTime: '',

                //后台权限列表拼接
                // button: [{
                //     name: '删除',
                //
                //     fn: this.del
                // }, {
                //     name: '修改',
                //     fn: this.modify
                //
                // }],
            };
            show: false

        },

        methods: {
            refresh() {
                this.tableLoading = true;
                $.ajax({
                    url: '${url}',
                    type: 'get',
                    dataType: 'json',
                    success: (result) => {
                        console.log(result)
                        this.tableLoading = false;
                        if (result.ret) {
                        }
                    }
                });
            },
            //状态转换
            formatStatus: function (row, column) {
                return row.orderBill_customStat == 1000 ? '待发货' : row.orderBill_customStat ==
                1007 ? '已发货' : row.orderBill_customStat == 1006 ? '已收货' : '未知';
            },
            search() {
                this.currentPage=1;
                this.pageSize=100;
                this.ajaxFunction();
            },

            //收货单确认收货
            affirmOrder(val, orderBean_pk) {
                window.location.href = "/order/billPage.page?type=affirm&orderNo=" + val + "&orderBean_pk=" + orderBean_pk;
            },
            //收货单详情
            detail(val, orderBean_pk, customStat) {
                window.location.href = "/order/billPage.page?type=detail&orderNo=" + val + "&orderBean_pk=" + orderBean_pk + "&customStat=" + customStat;
            },
            //填写物流信息
            updateOrder(val, orderBean_pk) {
                window.location.href = "/order/billPage.page?type=edit&orderNo=" + val + "&orderBean_pk=" + orderBean_pk;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.ajaxFunction();
            },
            //
            handleCurrentChange(val) {
                this.currentPage = val;
                this.ajaxFunction();
            },
            ajaxFunction() {
                this.tableLoading = true;
                $.ajax({
                    url: '/order/billsList.json',
                    type: 'post',
                    data: {
                        orderNo: this.sales_order_no,
                        userName: this.sales_man,
                        startTime: this.startTime,
                        endTime: this.endTime,
                        project_name:  this.project_name,
                        page: this.currentPage,
                        size: this.pageSize,
                        type: 20
                    },
                    dataType: 'json',
                    success: (result) =>{
                        console.log(result)
                        if (result.ret) {
                            this.tableData = result.data.list;
                            this.totalRecords = result.data.total;
                        } else {
                            this.$message({
                                message: '列表加载失败，请稍后重试.',
                                type: 'error'
                            });
                        }
                        this.tableLoading = false;
                    }
                });
            },
        },

        async mounted() {
            this.ajaxFunction();
        }
    })
</script>
</body>

</html>